<template>
  <el-tree ref="tree" :data="treeData" :props="defaultProps" accordion node-key="id" :highlight-current="true"
    v-bind="{ ...extraProps }" @node-click="handleNodeClick" />
</template>
<script lang='ts' setup>
import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
import { UserTreeData, UserTreeProps, UserTreeExtraProps } from './treeTypes';

const $emits = defineEmits([
  "hanldeNodeClick",
]);

const props = defineProps({
  // 数据
  treeData: {
    required: true,
    type: Array as PropType<Array<UserTreeData>>,
    default: () => [] as Array<UserTreeData>
  },
  // 节点相关配置
  defaultProps: {
    required: true,
    type: Object as PropType<UserTreeProps>,
    default: () => { }
  },
  extraProps: {
    //其他额外的一些参数
    type: Object as PropType<UserTreeExtraProps>,
    default: () => { },
  }
})

// 节点点击
function handleNodeClick(item: UserTreeData) {
  $emits("hanldeNodeClick", item)
}

const tree = ref();
// 清空选中
function clearCheckedKeys() {
  tree.value.setCurrentKey(null);
}

function getCurrentNode() {
  return tree.value.getCurrentNode()
}

defineExpose({
  getCurrentNode,
  clearCheckedKeys
})

</script>

<style lang="scss">
.el-tree-node__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>